<template>
	<view>
		<view class="fapiao margin-tb bg-white">
			<view class="top">
				发票信息
			</view>

			<u-field v-model="form.name" label="发票抬头" label-width="160" input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="发票抬头">
			</u-field>
			<u-field v-model="form.type" label="开具类型" label-width="160" disabled input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="开具类型" @click="as1Show=true">
			</u-field>
			<u-field v-model="form.invoice_type" label="发票类型" label-width="160" disabled input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="发票类型" @click="as2Show=true">
			</u-field>

			<u-action-sheet :list="as1" v-model="as1Show" @click="as1Select"></u-action-sheet>
			<u-action-sheet :list="as2" v-model="as2Show" @click="as2Select"></u-action-sheet>

			<u-gap height="60" style="border-bottom: 2rpx dashed rgba(191, 191, 191, 0.5);"></u-gap>
			<u-gap height="40"></u-gap>

			<u-field v-model="form.tax_no" label="税务登记证号" label-width="160" input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="请填写15到20位有效纳税人识别号">
			</u-field>
			<u-field v-model="form.bank" label="开户银行名称" label-width="160" input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="请填写您开户许可证上的开户银行">
			</u-field>
			<u-field v-model="form.account" label="基本开户账号" label-width="160" input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="请填写您开户许可证上的银行账号">
			</u-field>
			<u-field v-model="form.address" label="注册场所地址" label-width="160" input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="请填写您营业执照上的注册地址">
			</u-field>
			<u-field v-model="form.tel" label="注册固定电话" label-width="160" input-align="right" :clearable="false" :field-style="{fontSize: '24rpx'}"
			 placeholder="请填写您公司有效的联系电话">
			</u-field>
			<u-gap height="60"></u-gap>
		</view>

		<my-btn gold style="margin: 60rpx auto;" @click="submit">保存</my-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				as1: [{
						text: '个人'
					},
					{
						text: '企业'
					}
				],
				as1Show: false,
				as2: [{
						text: '增值税普通发票'
					},
					{
						text: '增值税专用发票'
					},
					{
						text: '组织（非企业）增值税普通发票'
					}
				],
				as2Show: false,
				form: {
					name: '',
					type: '',
					invoice_type: '',
					tel: '',
					address: '',
					account: '',
					bank: '',
					tax_no: '',
				}
			};
		},
		onLoad() {
			this.getDetail()
		},
		methods: {
			as1Select(e) {
				this.form.type = this.as1[e].text
			},
			as2Select(e) {
				this.form.invoice_type = this.as2[e].text
			},
			submit() {
				this.$u.post('/finance/invoice', this.form).then(res => {
					this.$msg(res.data.msg)
				})
			},
			getDetail() {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$u.get('/finance/invoice/detail').then(res => {
					let invoice = res.data.result.invoice
					this.form = invoice
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-field {
		font-size: 24rpx !important;
	}

	.fapiao {
		width: 670rpx;
		margin-left: auto;
		margin-right: auto;

		.top {
			width: 670rpx;
			height: 88rpx;
			background: linear-gradient(270deg, rgba(225, 165, 94, 1) 0%, rgba(255, 215, 166, 1) 100%);
			margin: 0 auto;
			text-align: center;
			letter-spacing: 4rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>
